13.6:H213205 Provide map or general layout for Web site.

Proper demonstration

To increase Web site usability, provide a map or a synopsis for the Web site.

Below is an example of Web site map:

Proper example:

  <P><A href="website.jsp">Web site browser synopsis</A></P>
  <TABLE width="75%" border="1">
  <CAPTION>
  Genius Bread Web site map
  </CAPTION>
  <TR>
  <TH>moon cake</TH>
  <TH>bread</TH>
  <TH>cake</TH>
  </TR>
  <TR>
  <TD>
  <UL>
  <LI><A href="ex.jsp">traditional moon cake</A></LI>
  <LI><A href="ex.jsp">hong kong style moon cake</A></LI>
  <LI><A href="ex.jsp">ice cream moon cake</A></LI>
  </UL>
  </TD>
  <TD>
  <UL>
  <LI><A href="ex.jsp">garlic bread</A></li>
  <LI><A href="ex.jsp">strawberry bread</A></li>
  <LI><A href="ex.jsp">pineapple bread</A></li>
  </UL>
  </TD>
  <TD>
  <UL>
  <LI><A href="ex.jsp">chocolate cake</A></LI>
  <LI><A href="ex.jsp">mango muse cake</A></LI>
  <LI><A href="ex.jsp">combination fruit cake</A></LI>
  </UL>
  </TD>
  </TR>
  </TABLE>

End of example

The example below has provided Web site synopsis:

Proper example:

<H1>Web site browser synposis</H1> 
<P>Genius bread Web site structure has three categories: 
moon cake, bread, and cake, for more information please refer to the products below:</P>
<DIV>
<H2>moon cake</H2>
<UL>
<LI><A href="ex.jsp">traditional moon cake</A></LI>
<LI><A href="ex.jsp">hong kong style moon cake</A></LI>
<LI><A href="ex.jsp">ice cream moon cake</A></LI>
</UL>
</DIV>
<DIV>
<H4>bread</H4>
<UL>
<LI><A href="ex.jsp">garlic bread</A></LI>
<LI><A href="ex.jsp">strawberry bread</A></LI>
<LI><A href="ex.jsp">pineapple bread</A></LI>
</UL>
</DIV>
<DIV>
<H4>cake</H4>
<UL>
<LI><A href="ex.jsp">chocolate cake</A></LI>
<LI><A href="ex.jsp">mango muse cake</A></LI>
<LI><A href="ex.jsp">combination fruit cake</A></LI>
</UL>
</DIV>

End of example